<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>ArkTS代码展示</title>
    <!-- 引入Prism样式（确保与HTML同目录） -->
    <link rel="stylesheet" href="prism.css">
    <!-- 引入Prism核心库和TypeScript语法支持（确保与HTML同目录） -->
    <script src="prism.js"></script>
    <style>
        /* 重置默认样式，避免额外边距 */
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        /* 页面背景：轻微灰色，与代码区区分 */
        body {
            background-color: #f5f5f5;
            padding: 10px; /* 可选：给页面加少量内边距，避免代码贴边 */
        }
        /* 代码容器：仅保留代码区域，去掉顶部黑边（删除原头部相关样式） */
        pre {
            /* 代码区深色背景（Prism主题默认深色，如需浅色可改#fff） */
            background-color: #1d1f21;
            /* 代码内边距，确保文字不贴边 */
            padding: 16px;
            /* 移动端长代码横向滚动（核心适配） */
            overflow-x: auto;
            /* 代码字体大小：适配手机阅读 */
            font-size: 14px;
            /* 行高：提升可读性 */
            line-height: 1.6;
            /* 可选：轻微圆角，避免生硬（不需要可删除） */
            border-radius: 6px;
            /* 可选：轻微阴影，突出代码区（不需要可删除） */
            box-shadow: 0 1px 3px rgba(0,0,0,0.1);
        }
        /* 代码字体：等宽字体，确保代码格式对齐 */
        code {
            font-family: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace;
            color: #ccc; /* 代码默认文字色，与深色背景适配 */
        }
    </style>
</head>
<body>
<!-- 仅保留代码展示核心区域：pre + code -->
<pre><code class="language-typescript" id="codeDisplay"></code></pre>
<script>
    /**
     * 接收并展示ArkTS代码的方法
     * @param {string} code - 传入的ArkTS源代码
     */
    function displayCode(code) {
        const codeElement = document.getElementById('codeDisplay');
        // 设置代码内容（空值时显示提示）
        codeElement.textContent = code || '未传入代码，请调用 displayCode(代码字符串)';
        // 触发Prism语法高亮
        Prism.highlightElement(codeElement);
    }
</script>
</body>
</html>